<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node.js</title>
    <style>

        img:hover {
            opacity: 0.2;
            transition: all 1.0s;
        }

        li {
            list-style: none;
        }

        pre,
        ul.sub {
            padding: 4px;
            border-radius: 4px;
            display: block;
            margin-right: 40px;
            background-color: #efefef;
        }

    </style>
</head>
<body>
<div style="display: block; overflow: scroll; width: 100%; height: 100%;">
    <h2>Node.js</h2>
    <div>
        Node.js是一个Javascript运行环境(runtime), 它对Google V8引擎进行了封装, 使得Javascript编写的程序能够运行在浏览器之外的环境上。
    </div>
    <h3>Ecosystem 生态</h3>
    <div>
        Node.js使用 npm 来管理整个Node.js生成系统, npm 简单易用, 只需要几个常用命令即可。
    </div>
    <h3>优点</h3>
    <ul>
        <li>
            <h4>技术特点</h4>
            <ul class="sub">
                <li>1. 单线程: 相比Java后台程序为每个请求创建一个线程, Node.js只有一个线程;</li>
                <li>2. 非阻塞IO: Node.js在不新增额外线程的情况下, 通过事件轮询(event loop)来高效的实现并行操作, 非常适合在分布式设备上运行数据密集型的实时应用;</li>
            </ul>
            <h4>开发周期</h4>
            <ul class="sub">
                <li>1. Node.js从发布到现在几年时间, 已经建立了一个良好的生态环境, 有大量的第三方开发库供开发者选择, 搭建web应用非常快速;</li>
                <li>2. 开发成本相对较低, 只需要在熟练掌握Javascript的前提下即可进行学习开发;</li>
            </ul>
            <h4>应用方向</h4>
            <ul class="sub">
                <li>1. 由于其单线程和非阻塞IO, 事件驱动机制等特性, 非常适合高并发高流量网站;</li>
                <li>2. 适合开发 移动Web框架 和 移动Web应用;</li>
            </ul>
        </li>
    </ul>
    <h3>示例</h3>
    <ul><a href="https://gold.xitu.io/">稀土掘金技术社区 https://gold.xitu.io/</a></ul>
    <ul><a href="https://cnodejs.org/">Node.js中文论坛 https://cnodejs.org/</a></ul>
    <ul><a href="https://worktile.com/tech/">Worktile工作流 https://worktile.com/tech/</a></ul>
    <h2>HelloWorld</h2>
    <ul>
        <li>
            <h4>1. 新建项目</h4>
            <div>
                <pre>npm init </pre>
            </div>
        </li>
        <li>
            <h4>2. package.json</h4>
            <div>
            <pre>
{
  "name": "reactzt",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "node -v"
  },
  "repository": {
    "type": "git",
    "url": "https://git.oschina.net/xlxlxl/ReactZt.git"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
  }
}</pre>
            </div>
        </li>
        <li>
            <h5>2.1 scripts</h5>
            <pre>npm run test</pre>
        </li>
        <li>
            <h4>3. 安装第三方库</h4>
            <div>全局安装</div>
            <pre>npm install webpack -g</pre>
            <div>安装到项目</div>
            <pre>npm install webpack --save</pre>
        <pre>
  "dependencies": {
    "webpack": "^1.14"
  }</pre>
        </li>
        <li>
            <h4>4. node_modules</h4>
            <div>node_modules里面存放的就是第三方库的源代码;</div>
        </li>
        <li>
            <h4>5. helloworld</h4>
            <div>创建index.js文件</div>
            <pre>console.log('HelloWorld');</pre>
            <div>使用node命令运行index.js文件</div>
        <pre>node index.js
// => HelloWorld</pre>
        </li>
        <li>
            <h4>6. coding</h4>
            <div><strong>Enjoy yourself, Write anything you want!</strong></div>
        </li>
    </ul>
    <h2>Team development</h2>
    <ul>
        <li>
            <strong>A: </strong>
            <div>添加一个模块Module, 并记录在 package.json 中;</div>
        </li>
        <br/>
        <li>
            <strong>B: </strong>
            <pre>npm install</pre>
            <div>使用 npm install 命令安装A添加的模块, 该命令会自动安装配置在package.json中的尚未安装的库;</div>
        </li>
    </ul>
</div>

<div style="display: block; position: relative; width: 100%; height: 100%;">
    <img width="150" height="150" style="position: fixed; bottom: 20px; right: 20px;" src="image/coding2.gif">
</div>
</body>
</html>